<template>
    <div>
        <el-dialog
                :visible.sync="dialogVisible"
                width="50%"
                :close="close"
                :before-close="close">

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户ID：">
                    <span > {{ form.userId }} </span>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="form.userName" :readonly="!editFlag" clearable></el-input>
                </el-form-item>
                <el-form-item label="用户账号">
                    <el-input v-model="form.account" :readonly="!editFlag" clearable></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="form.newPwd" type="password" :readonly="!editFlag" clearable show-password></el-input>
                </el-form-item>
                <el-form-item label="用户角色">
                    <el-select v-model="form.roleId" :disabled="!editFlag" @change="selectRole">
                        <el-option v-for="(item, i) in roleList" :key="i" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <div v-if="!editFlag">
                    <el-button type="primary" @click="close">确 定</el-button>
                    <el-button @click="close">关 闭</el-button>
                    <el-button type="warning" @click="toChange">开启修改</el-button>
                </div>
                <div v-else>
                    <el-button type="primary" @click="submitChange">提交修改</el-button>
                    <el-button @click="cancelChange">取消修改</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from "@/api/api"
import {RoleEnum} from "../../common/RoleEnum";
export default {
    name: "UserDetail",
    props: ["user", "roleList"],
    data() {
        return {
            // 用户详情标志位
            dialogVisible: true,
            // 修改标志位
            editFlag: false,
            // 用于展示
            form: {},
            //
            userDetail: {},
            encodePwd: "******",
        }
    },
    mounted() {
      if (this.user) {
        this.getUser();
      }
    },
    methods: {
        close() {
            this.$emit("close");
        },
        // 用户详情查询
        getUser() {
            let url = API.sysUser.sysUserQuery;
            let param = JSON.parse(JSON.stringify(this.user));
            this.$get(url, param).then( res => {
                let data = res.data;
                if ( data.success ) {
                    this.userDetail = data.data;
                    console.log(this.userDetail, "8888888888888888this.userDetail ");
                    this.form = JSON.parse(JSON.stringify(data.data));
                    this.form.pwd = this.encodePwd;
                } else {
                    this.$message.closeAll();
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    })
                }
            }).catch( err => {
                this.$message.closeAll();
                this.$message.error({
                    showClose: true,
                    message: "请求失败!"
                })
            })
        },
        // 开启修改
        toChange() {
            console.log(this.$hasAdmin, "!!!!!!!!!!!!!!!!!!!!!!管理员权限");
            if (this.$hasAdmin) {
                this.editFlag = true;
                return;
            }
            // 如果想修改管理员, 则需要有管理员权限
            if (this.form.roleId === RoleEnum.ADMIN && !this.$hasAdmin) {
                this.$message.closeAll();
                this.$message.warning({
                    showClose: true,
                    message: '你没有修改‘管理员’的权限!'
                });
                return;
            }
            // 店长不可以修改其他店长的信息
            if (this.form.userId !== this.$userId && this.form.roleId === RoleEnum.STORE_MANAGER) {
                this.$message.closeAll();
                this.$message.warning({
                    showClose: true,
                    message: '你没有修改其他店长信息的权限!'
                });
                return;
            }
            this.editFlag = true;
        },
        // 取消修改
        cancelChange() {
            this.editFlag = false;
            this.form = JSON.parse(JSON.stringify(this.userDetail));
            this.form.pwd = this.encodePwd;
        },
        // 提交修改
        submitChange() {
            //
            let url = API.sysUser.update;
            let param = this.form;
            if (param.account !== this.userDetail.account) {
                param.flag = 'account';
            }
            // if (param.pwd == this.encodePwd) {
            //     param.pwd = JSON.parse(JSON.stringify(this.userDetail.pwd));
            // }
            // if (param.pwd != this.userDetail.pwd) {
            //     param.newPwd = param.pwd;
            // }
            this.$post(url, param).then( res => {
                let data = res.data;
                if (data.success) {
                    this.$message.success({
                        showClose: true,
                        message: "修改成功!"
                    });
                    // 如果修改的是当前登录人的密码或账号, 需要重新登录
                    let userId = JSON.parse(sessionStorage.getItem("userInfo")).userId;
                    if (userId === param.userId && (param.newPwd || param.flag) ) {
                        this.logout();
                    } else {
                        this.close();
                    }
                } else {
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    });
                }

            }).catch( err => {
                this.$message.error({
                    showClose: true,
                    message: "请求失败!",
                });
            })
        },
      // 选择角色下拉
      selectRole(item) {
        console.log("看看值：", item);
        this.form.roleList = [item];
      },

      logout() {
          sessionStorage.clear();
          this.$message.closeAll();
          this.$message.warning("你的‘账号’或‘密码’已被修改，请重新登录!");
          this.$router.push('/login');
      },
    }
}
</script>

<style scoped>

</style>
